<template class="content">
    <el-row :gutter="20">
        <el-col :span="6">
            <el-card style="max-width: 480px">
                <p class="text item">独生子女数量:{{ mainStore.childSum }}</p>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card style="max-width: 480px">
                <p class="text item">城市户口学生数量:{{ mainStore.huKSum }}</p>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card style="max-width: 480px">
                <p class="text item">已成年学生数量:{{ mainStore.ageSum }}</p>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card style="max-width: 480px">
                <p class="text item">已接种新冠疫苗人数:{{ mainStore.vaccineSum }}</p>
            </el-card>
        </el-col>
    </el-row>
    <el-card>
        <el-button size="large" type="success" @click="diaLog('add')">添加学生</el-button>
        <el-button size="large" type="warning" @click="onDelete('check')">删除选中</el-button>
        <el-button size="large" type="danger" @click="onDelete('all')">删除全部</el-button>
        <el-table :data="tableData" border style="width: 100%;margin-top:20px;" @selection-change="onselect">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column property="name" label="姓名" width="120" align="center"></el-table-column>
            <el-table-column property="age" label="年龄" width="80" align="center" />
            <el-table-column property="onlyChild" label="是否独生" width="120" align="center">
                <template #default="scope">
                    {{ scope.row.onlyChild === '1' ? '独生子女' : '非独生' }}
                </template>
            </el-table-column>
            <el-table-column property="huKou" label="户口" width="120" align="center">
                <template #default="scope">
                    {{ scope.row.huKou === '1' ? '城市户口' : '农村户口' }}
                </template>
            </el-table-column>
            <el-table-column property="IDCard" label="身份证" align="center" />
            <el-table-column property="address" label="地址" align="center" />
            <el-table-column property="vaccine" label="新冠疫苗" align="center">
                <template #default="scope">
                    {{ scope.row.vaccine === '1' ? '已接种' : '未接种' }}
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <el-button type="danger" @click="onDelete(scope.row.id)">删除</el-button>
                    <el-button @click="diaLog(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <!-- 弹窗 -->
    <addFrom ref="addTab" v-if="show" @close="show = false"></addFrom>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { nextTick, reactive, computed, ref } from 'vue';
import { useMainStore } from '../store';
import addFrom from './addFrom.vue';

const mainStore = useMainStore()//创建pinia对象

/*
表格数据
 **/
let tableData = reactive(computed(() => { return mainStore.tabList }))//获取页面的表格数据

/*
dialog页面
**/
let show = ref(false)//显示dialog页面的控制参数
let addTab = ref()//定义子组件的ref值
let diaLog = (val) => {//dialog页面控件显示的函数（新增学生信息，修改信息页面）
    show.value = true
    if (val === 'add') {
        val = undefined
    }
    nextTick(() => {
        addTab.value.open(val)
    })
}

/*
页面控件函数
**/
let arr = ref([])//选择数据id存储数据
let onselect = (val) => {//表格数据选择后的回调函数
    arr = val.map(item => item.id)
}
let onDelete = (val) => {//删除控件的执行函数
    if ((val === 'all' || val === 'check') && !arr.length) {
        // console.log('asdfasd', arr.length);
        ElMessage({
            message: '未选择删除选项',
            type: 'warning',
        })
        return
    }
    ElMessageBox.confirm(
        `是否对学生信息进行删除操作！！`,
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        if (val === 'all') {
            arr = tableData.value.map(item => item.id)
            console.log('数据id列表', arr);
        } else if (val === 'check') {
            console.log('选中数据id列表', arr);

        } else {
            arr = [val]
            console.log('本行数据id', arr);
        }
        mainStore.changTab(arr)
        arr = []

        ElMessage({
            type: 'success',
            message: '删除操作成功！',
        })
    })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '删除操作取消',
            })
        })

}
//小更新测试git密码输入
</script>

<style scoped lang="less">
.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.cont-page {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 1200px;
    margin: 0 auto;
    /* border: 1px solid #ccc; */
}
</style>